<!DOCTYPE html>
<script src='vendor/three.js/build/three.min.js'></script>
<script src='vendor/three.js/examples/js/modifiers/SubdivisionModifier.js'></script>

<script src='../threex.dilategeometry.js'></script>
<body style='margin: 0px; background-color: #bbbbbb; overflow: hidden;'>
<div style='position: absolute; text-align: center; width: 100%;'>
	On the <strong>left</strong>, a torus knot with normal material and its <strong>eroded</strong> geometry in wireframe.
	<br/>
	On the <strong>right</strong>, you see the same torus but with its <strong>dilated</strong> geometry in wireframe.
</div>
<script>
	var renderer	= new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	var updateFcts	= [];
	var scene	= new THREE.Scene();
	var camera	= new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100 );
	camera.position.z = 5;

	//////////////////////////////////////////////////////////////////////////////////
	//		add eroded geometry on the left				//
	/////////////////////////////////////////////////////////////////////////////////


	var geometry	= new THREE.TorusKnotGeometry(1-0.25, 0.25, 32*3);
	// var geometry	= new THREE.CubeGeometry(1,1,1, 10, 10, 10);
	// // mergeVertices(); is run in case of duplicated vertices
	// // geometry.mergeVertices();
	// // geometry.computeCentroids();
	// // geometry.computeFaceNormals();
	// // geometry.computeVertexNormals();
	// var modifier	= new THREE.SubdivisionModifier(2)
	// modifier.modify(geometry)

	var material	= new THREE.MeshNormalMaterial({
		opacity		: 0.9,
		transparent	: true,
	})
	var mesh	= new THREE.Mesh( geometry, material );
	mesh.position.x	= -1.5
	scene.add( mesh );

	var erodedGeometry	= geometry.clone();
	THREEx.dilateGeometry(erodedGeometry, -0.1)
	var erodedMesh	= new THREE.Mesh( erodedGeometry, new THREE.MeshBasicMaterial({
		wireframe	: true,
		color		: 'black',
	}))
	mesh.add( erodedMesh );
	

	//////////////////////////////////////////////////////////////////////////////////
	//		add dilated geometry on the right				//
	/////////////////////////////////////////////////////////////////////////////////
	var geometry	= new THREE.TorusKnotGeometry(1-0.25, 0.25, 32*3);
	// var geometry	= new THREE.CubeGeometry(1,1,1, 10, 10, 10);
	var material	= new THREE.MeshNormalMaterial({
		opacity		: 0.9,
		transparent	: true,
	})
	var mesh	= new THREE.Mesh( geometry, material );
	mesh.position.x	= 1.5
	scene.add( mesh );
	
	var dilatedGeometry	= geometry.clone();
	THREEx.dilateGeometry(dilatedGeometry, 0.1)
	var dilatedMesh	= new THREE.Mesh( dilatedGeometry, new THREE.MeshBasicMaterial({
		wireframe	: true,
		color		: 'black',
	}))
	dilatedMesh.position.x	= 1.5
	scene.add( dilatedMesh );

	//////////////////////////////////////////////////////////////////////////////////
	//		Camera Controls							//
	//////////////////////////////////////////////////////////////////////////////////
	var mouse	= {x : 0, y : 0}
	document.addEventListener('mousemove', function(event){
		mouse.x	= (event.clientX / window.innerWidth ) - 0.5
		mouse.y	= (event.clientY / window.innerHeight) - 0.5
	}, false)
	updateFcts.push(function(delta, now){
		camera.position.x += (mouse.x*5 - camera.position.x) * (delta*3)
		camera.position.y += (mouse.y*5 - camera.position.y) * (delta*3)
		camera.lookAt( scene.position )
	})


	//////////////////////////////////////////////////////////////////////////////////
	//		render the scene						//
	//////////////////////////////////////////////////////////////////////////////////
	updateFcts.push(function(){
		renderer.render( scene, camera );		
	})
	
	//////////////////////////////////////////////////////////////////////////////////
	//		loop runner							//
	//////////////////////////////////////////////////////////////////////////////////
	var lastTimeMsec= null
	requestAnimationFrame(function animate(nowMsec){
		// keep looping
		requestAnimationFrame( animate );
		// measure time
		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
		lastTimeMsec	= nowMsec
		// call each update function
		updateFcts.forEach(function(updateFn){
			updateFn(deltaMsec/1000, nowMsec/1000)
		})
	})
</script></body>
